<!DOCTYPE html> 
<html> 
	<head> 
    <title>Google Spreadsheet Javascript</title> 
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="google-spreadsheet.js"></script>
    <script type="text/javascript" src="openplay_functions.js"></script>
    <style>
      body{
        background-color: white;
        color: black;
        font-size: .8em;
        font-family: sans-serif;
      }
      h1,a{ color: black}
      input{
        font-size: .8em;
        background-color: white;
        color:black;
      }
    </style>
    <script>
    function populateList() {
    	openplay_build_selection('Activity');
    	openplay_build_selection('Type of place');
    	openplay_build_selection('Charter');
    	// USAGE: openplay_get_sscol(ss_name,attribute_name)
    	
    	var activityArray = new openplay_get_unique('OpenPlay Activity','Activity');
    	var type_placeArray = new openplay_get_unique('OpenPlay Activity','Type of place');
    	var type_charterArray = new openplay_get_unique('OpenPlay Activity','Charter');
    }
    </script>
  </head> 
  <body onload = "populateList()"> 
  <!-- onload="openplay_show_ss('OpenPlay Activity')" -->
    <h1>Google Spreadsheet Access</h1>
    And here are the results:
   <form action="#" method="" name="form1" id="form1">
   
   </form> 
   
<!--  
  <form action="#" method="" name="form1">
  <div>  Suggest an Activity:<font color="red">*</font>
  <select name="act" id="activity"></select>  
  <br>
  </div>
  </form>
  
  <form action="#" method="" name="form2">
  <div>  Type of place:<font color="red">*</font>
  <select name="place" id="type_place"></select>  
  <br>
  </div>
  </form>
  <form action="#" method="" name="form3">
  <div>  Type of charter:<font color="red">*</font>
  <select name="charter" id="type_charter"></select>  
  <br>
  </div>
  </form>
-->
  
 
    <pre id='results'></pre>
    
    <button onclick="openplay_show_ss('OpenPlay Activity')" > OpenPlay Activities </button>

  </body>
</html>